// #region demo
import * as THREE from "three";

// 场景
// #region create-scene
const scene = new THREE.Scene();
// #endregion create-scene

// 透视相机
// #region create-camera
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    4,
    1000
);
// 设置相机在 Z 轴的位置
camera.position.z = 5;
// #endregion create-camera

// 渲染器
// #region create-renderer
// 实例化一个渲染器对象
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器插入到 Body 元素内部
document.body.appendChild(renderer.domElement);
// #endregion create-renderer

// 立方体
// #region create-box
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// #endregion create-box

// 实时渲染
// #region animate
function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();
// #endregion animate
// #endregion demo
